<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap主题内容</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    body{
        margin: 1%;
        padding: 2%;
    }
    #carousel{
        background-color:#e7e7e7;
    }
    .carousel-control-prev-icon{
        background-image: url(../img/left.png);
    }
    .carousel-control-next-icon{
        background-image: url(../img/right.png);
    }
    
</style>

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navDemo">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navDemo">
            <a href="#" class="navbar-brand">
                <img src="../img/head.jpg" alt="头像" width="30" height="30" class="d-inline-black align-top">
                金字招牌
            </a>
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link">首页</a>
                <a href="#" class="nav-item nav-link">列表</a>
                <a href="#" class="nav-item nav-link">设置</a>
                <a href="#" class="nav-item nav-link">关于</a>
            </div>
            <form action="" class="form-inline ml-auto">
                <input type="text" name="search" id="search" class="form-control mr-sm-2" placeholder="在本站搜索">
                <button class="btn btn-outline-secondary my-2 my-sm-0">搜索</button>
            </form>
        </div>
    </nav>

    <div class="carousel slide mt-3 w-100" id="carousel" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="carousel" data-slide-to="0" class="active"></li>
            <li data-target="carousel" data-slide-to="1"></li>
            <li data-target="carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active"><img src="../img/slider1.jpg" alt="" class="mx-auto d-block img-fluid"></div>
            <div class="carousel-item"><img src="../img/slider2.jpg" alt="" class="mx-auto d-block img-fluid"></div>
            <div class="carousel-item"><img src="../img/slider3.jpg" alt="" class="mx-auto d-block img-fluid"></div>
        </div>
        <a href="#carousel" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#carousel" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>

    <div class="container mb-4">
        <h2>基于BootStrap4.X制作</h2>
        <p>快速,简洁,高效</p>
        <div class="row index-content">
            <div class="col-lg-6 m-4">
                <div class="media">
                    <img src="../img/tab-1.png" alt="tab-1">
                    <div class="media-body ml-2">
                        <h5 class="mb-3">课程内容</h5>
                        <p class="text-muted mb-2"><del>枯燥乏味的课程?</del></p>
                        <p>十天精品课堂系列, 一节课址只用十分钟</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab5 mb-5">
        <div class="container">
            <div class="row align-items-center text-center">
                <div class="col-md-6 p-5">
                    <img src="../img/tab5.png" width="60%" alt="tab5">
                </div>
                <div class="col-md-6 tab5-p p-4">
                    <h3>简单易学的编码</h3>
                    <p>直接在标签中编写样式</p>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer bg-dark text-light text-center p-5">
        <p class="m-1">企业培训 | 合作事宜 | 关于我们</p>
        <p> 冀 ICP 备 99999999 . Author : CuiYingJie</p>
    </footer>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    
</body>

</html>